<template>
	<a-modal
		:title="handleType === 'add' ? '增加' : '修改'"
		:visible="visible"
		:confirm-loading="confirmLoading"
		@ok="handleOk"
		@cancel="handleCancel"
	>
		<a-form-model ref="outcpForm" :model="form" :rules="rules" v-bind="layout">
			<a-form-model-item label="物流公司名称" prop="name" has-feedback>
				<a-input v-model="form.name" placeholder="请输入" />
			</a-form-model-item>

			<a-form-model-item label="省/市/区" prop="area_code" has-feedback>
				<app-tree-select
					v-model="form.area_code"
					style="width: 220px"
					:code="$e.city"
					radio
					placeholder="请选择"
					@change="changeArea"
				/>
			</a-form-model-item>

			<a-form-model-item label="地址" prop="address" has-feedback>
				<a-input v-model="form.address" placeholder="请输入" />
			</a-form-model-item>

			<a-form-model-item label="联系人" prop="contact" has-feedback>
				<a-input v-model="form.contact" placeholder="请输入" />
			</a-form-model-item>

			<a-form-model-item label="电话号码" prop="phone" has-feedback>
				<a-input v-model="form.phone" placeholder="请输入" />
			</a-form-model-item>

			<a-form-model-item label="唯一标识" has-feedback>
				<a-input
					v-model="form.code"
					:disabled="handleType != 'add'"
					placeholder="请输入"
				/>
			</a-form-model-item>

			<a-form-model-item label="营业开始时间" prop="start_time" has-feedback>
				<a-time-picker
					placeholder="请选择"
					@change="onChangeStartTime"
					v-model="value1"
					format="HH:mm"
				/>
			</a-form-model-item>

			<a-form-model-item label="营业结束时间" prop="end_time" has-feedback>
				<a-time-picker
					placeholder="请选择"
					@change="onChangeEndTime"
					v-model="value2"
					format="HH:mm"
				/>
			</a-form-model-item>

			<a-form-model-item label="状态" prop="status" has-feedback>
				<a-select
					style="width: 120px"
					@change="changeStatus(item.key)"
					placeholder="请选择"
					v-model="form.status"
				>
					<a-select-option
						v-for="(item, index) in statusList"
						:value="item.key"
						:key="index"
					>
						{{ item.text }}
					</a-select-option>
				</a-select>
			</a-form-model-item>
		</a-form-model>
	</a-modal>
</template>

<script>
	// import User from "@/api/user"
	import moment from "moment"
	// import momentUtil from "@/utils/day"
	import Outcp from "@/api/outcp"
	export default {
		name: "handleForm",
		data() {
			this.id = null
			this.handleType = null
			this.statusList = [
				{
					key: 1,
					text: "正常",
				},
				{
					key: 0,
					text: "停用",
				},
				{
					key: -1,
					text: "冻结",
				},
			]
			return {
				value1: null,
				value2: null,
				title: "增加",
				layout: {
					labelCol: { span: 6 },
					wrapperCol: { span: 12 },
				},
				ModalText: "Content of the modal",
				visible: false,
				confirmLoading: false,
				form: {
					// area_code_right_like: undefined,
					// area_code: undefined,

					address: undefined,
					area_code: undefined,
					area_name: undefined,
					code: undefined,
					contact: undefined,
					create_user_id: undefined,
					created_at: undefined,
					created_at_show: undefined,
					end_time: undefined,
					id: undefined,
					name: undefined,
					phone: undefined,
					start_time: undefined,
					status: undefined,
					status_show: undefined,
					tenant_id: undefined,
					update_user_id: undefined,
					updated_at: undefined,
					updated_at_show: undefined,
				},
				rules: {
					name: [
						{ required: true, trigger: "change", message: "物流公司名称必填" },
					],
					area_code: [
						{ required: true, trigger: "change", message: "省市区必填" },
					],
					address: [{ required: true, trigger: "change", message: "地址必填" }],
					contact: [{ required: true, trigger: "change", message: "联系人必填" }],
					phone: [{ required: true, trigger: "change", message: "电话号码必填" }],

					// ====================

					start_time: [
						{ required: true, trigger: "change", message: "营业开始时间必填" },
					],

					end_time: [
						{ required: true, trigger: "change", message: "营业结束时间必填" },
					],
					status: [{ required: true, trigger: "change", message: "请选择状态" }],
				},
			}
		},

		watch: {
			visible(newVal) {
				if (newVal == false) this.resetFormFields()
			},
		},
		mounted() {
			console.log(this.$e.city)
		},
		methods: {
			moment,
			changeArea: function (data, extData) {
				console.log(data, extData)
				// this.form.area_code_right_like = undefined
				// if (!data) return
				// this.form.area_code_right_like = data.area_code
				// this.queryForm()
			},
			queryForm() {
				// this.data = []
				// this.pagination.current = 1
				// this.handleTableChange(this.pagination, {}, {})
			},
			onChangeStartTime(time, timeString) {
				this.form.start_time = timeString
				// console.log(time, timeString)
				this.value1 = time
			},
			onChangeEndTime(time, timeString) {
				this.form.end_time = timeString
				// console.log(time, timeString)
				this.value2 = time
			},
			formatStamp(timeStr) {
				console.log(
					timeStr,
					this.moment(this.$formatDate("h:m", +new Date(timeStr)), "HH:mm")
				)
				return this.moment(this.$formatDate("h:m", +new Date(timeStr)), "HH:mm")
			},
			getObj(rulesKeyArr) {
				let obj = {}
				for (let key of rulesKeyArr) {
					obj[key] = this.form[key]
				}
				return obj
			},
			checkRequire(obj) {
				return this.$isEmpty(obj)
			},

			changeStatus(value) {
				this.form.status = value
			},

			resetFormFields() {
				this.form = {
					address: undefined,
					area_code: undefined,
					area_name: undefined,
					code: undefined,
					contact: undefined,
					create_user_id: undefined,
					created_at: undefined,
					created_at_show: undefined,
					end_time: undefined,
					id: undefined,
					name: undefined,
					phone: undefined,
					start_time: undefined,
					status: undefined,
					status_show: undefined,
					tenant_id: undefined,
					update_user_id: undefined,
					updated_at: undefined,
					updated_at_show: undefined,
				}
				this.value1 = null
				this.value2 = null
				this.$refs.outcpForm.resetFields()
			},

			handleOk() {
				this.handleType === "add" ? this.addOutcp() : this.updateOutcp()
			},
			addOutcp() {
				let _this = this
				_this.$refs.outcpForm.validate((err, values) => {
					// 验证表单没错误
					if (err) {
						_this.confirmLoading = true
						Outcp.create(this.$removeField(_this.form))
							.then((res) => {
								_this.confirmLoading = false
								if (res.code == 1) {
									_this.$message.success("添加成功")
									_this.$emit("handleOk")
									setTimeout(() => {
										_this.visible = false
									}, 500)
								}
							})
							.catch((e) => {
								_this.confirmLoading = false
							})
					}
				})
			},

			updateOutcp() {
				let _this = this
				_this.$refs.outcpForm.validate((err, values) => {
					// 验证表单没错误
					if (err) {
						_this.confirmLoading = true
						Outcp.update(this.id, this.$removeField(_this.form))
							.then((res) => {
								_this.confirmLoading = false
								if (res.code == 1) {
									_this.$message.success("修改成功")
									_this.$emit("handleOk")
									setTimeout(() => {
										_this.visible = false
									}, 500)
								}
							})
							.catch((e) => {
								_this.confirmLoading = false
							})
					}
				})
			},
			getOutcpDataById() {
				Outcp.select(this.id).then((res) => {
					console.log(res)
					if (res.code == 1) {
						// this.pagination.total = res.page.totalSize
						// this.pagination.totalPage = res.page.totalPage
						//dataSource 默认将每列数据的 key 属性作为唯一的标识
						//处理数据，否则需要excel代码里处理了
						// this.data = res.data.map((item, index) => {
						// 	return Object.assign(item, { index: index + 1 })
						// })
						// ========================
						// if (this.data.length === 0) {
						// 	this.data = [
						// 		{ id: "1", name: "a" },
						// 		{ id: "2", name: "b" },
						// 	]
						// }
						// ========================
						// console.log(this.data)

						Object.keys(this.form).forEach((key) => {
							this.form[key] = res.data[key]
						})

						// ====================页面显示数据============================
						this.value1 =
							this.form.start_time.length <= 5
								? this.moment(this.form.start_time, "HH:mm")
								: this.formatStamp(this.form.start_time)
						this.value2 =
							this.form.end_time.length <= 5
								? this.moment(this.form.end_time, "HH:mm")
								: this.formatStamp(this.form.end_time)
						// ====================传递到后端数据============================
						this.form.start_time =
							this.form.start_time.length <= 5
								? this.form.start_time
								: this.$formatDate("h:m", +new Date(this.form.start_time))
						this.form.end_time =
							this.form.end_time.length <= 5
								? this.form.end_time
								: this.$formatDate("h:m", +new Date(this.form.end_time))
					}
				})
			},
			showModal(type, recode) {
				console.log(type, recode)
				this.handleType = type
				if (type === "update") {
					this.id = recode.id
					this.getOutcpDataById()
				}
				this.visible = true
			},

			handleCancel(e) {
				this.visible = false
			},
		},
	}
</script>

<style>
</style>